<template>
  <!-- 阶梯批发价设置组件 -->
  <div class="pad-l-20 pad-r-20">
    <div class="flex v-align-c">
      <h3 class="flex-item font-18 drawer-t">设置阶梯价</h3>
      <i class="el-icon-close font-20" @click="doClose"></i>
    </div>
    <div class="pad-t-20 pad-b-20">
      <div
        class="el-table el-table--fit el-table--border el-table--enable-row-hover el-table--medium el-table--scrollable-x">
        <div class="el-table__body-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%">
            <thead class="el-table__header">
              <tr>
                <th width="50">
                  <div class="cell text-align-c">序号</div>
                </th>
                <th width="135">
                  <div class="cell text-align-c">起批数量</div>
                </th>
                <th width="135">
                  <div class="cell text-align-c">批发价</div>
                </th>
                <th width="135">
                  <div class="cell text-align-c">预览</div>
                </th>
                <th width="50">
                  <div class="cell text-align-c">操作</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in priceList" :key="'info-' + index">
                <td>
                  <div class="cell text-align-c">
                    <span>{{ index + 1 }}</span>
                  </div>
                </td>
                <td>
                  <div class="cell">
                    <el-input v-model="item.ladderNum"
                      @keyup.native="item.ladderNum = checkInputPositiveNum(item.ladderNum)"
                      placeholder="请输入起批数量">
                    </el-input>
                  </div>
                </td>
                <td>
                  <div class="cell">
                    <el-input v-model="item.ladderPrice"
                      @keyup.native="item.ladderPrice = checkInputNum(item.ladderPrice)"
                      placeholder="请输入阶梯价">
                    </el-input>
                  </div>
                </td>
                <td>
                  <div class="cell">
                    <span>{{ Number.isNaN(parseInt(item.ladderNum)) ? '?' : item.ladderNum }}</span>
                    <span>~</span>
                    <span>{{ (priceList.length - 1) == index ? '∞' : (Number.isNaN(parseInt(priceList[index + 1].ladderNum)) ? '?' : (priceList[index + 1].ladderNum) - 1) }}</span>
                    <span>件：</span>
                    <span v-if="item.ladderPrice">{{ item.ladderPrice }}元/件</span>
                  </div>
                </td>
                <td>
                  <div class="cell">
                    <el-button type="text" @click="doDelete(index)">删除</el-button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <el-button type="text" @click="doAdd" v-if="priceList.length < 5">
            <span>+新增一规则(最多添加5条)</span>
          </el-button>
        </div>
      </div>
    </div>
    <div style="text-align: right">
      <el-button @click="doClose">关闭</el-button>
      <el-button type="primary" @click="doConfirm">确定设置</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      // ladderPriceList: {
      //   type: Array
      // },
      form: {
        type: Object
      }
    },
    data() {
      return {
        priceList: [],
        supplyAllianceIsEnableWholesaleModel: '',
        supplyAllianceWholesalePriceType: '',
        supplyAllianceMaxWholesalePrice: '',
        supplyAllianceMinWholesalePrice: ''
      }
    },
    created() {
      this.priceList = JSON.parse(JSON.stringify(this.form.ladderPriceList))
      this.supplyAllianceIsEnableWholesaleModel = this.form.supplyAllianceIsEnableWholesaleModel
      this.supplyAllianceWholesalePriceType = this.form.supplyAllianceWholesalePriceType
      this.supplyAllianceMaxWholesalePrice = this.form.supplyAllianceMaxWholesalePrice
      this.supplyAllianceMinWholesalePrice = this.form.supplyAllianceMinWholesalePrice
    },
    methods: {
      // 新增阶梯批发价
      doAdd() {
        const obj = {
          ladderNum: '',
          ladderPrice: ''
        }
        this.priceList.push(obj)
      },
      // 删除阶梯批发价
      doDelete(subIndex) {
        this.priceList.splice(subIndex, 1)
      },
      // 关闭事件
      doClose() {
        this.$confirm('尚未保存，确定关闭吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('callback')
        }).catch(() => {
        })
      },
      // 保存阶梯批发价
      doConfirm() {
        const list = this.priceList
        if (list.length > 0) {
          // 判空
          const empty = list.filter(item => Number(item.ladderNum) <= 0 || Number(item.ladderPrice) <= 0)
          if (empty.length > 0) {
            this.$message({ type: 'error', message: '数量/单价要大于0' })
            return
          }
          // 判阶梯
          if (list.length > 1) {
            for (let i = 0; i < list.length - 1; i++) {
              const currentNum = parseInt(list[i].ladderNum)
              const afterNum = parseInt(list[i + 1].ladderNum)
              if (afterNum <= currentNum) {
                this.$message({ type: 'error', message: '起批数量' + afterNum + '要大于上一级阶梯' + currentNum })
                return
              }
              const currentPrice = parseFloat(list[i].ladderPrice)
              const afterPrice = parseFloat(list[i + 1].ladderPrice)
              if (afterPrice >= currentPrice) {
                this.$message({ type: 'error', message: '批发价' + afterPrice + '要小于上一级阶梯' + currentPrice })
                return
              }
            }
          }
          // 判断是否限定批发价范围
          if (this.supplyAllianceIsEnableWholesaleModel === 1) {
            if (this.supplyAllianceWholesalePriceType === 1) {
              const supplyAllianceMaxWholesalePrice = parseFloat(this.supplyAllianceMaxWholesalePrice)
              const supplyAllianceMinWholesalePrice = parseFloat(this.supplyAllianceMinWholesalePrice)
              for (let j = 0; j < list.length; j++) {
                const ladderPrice = parseFloat(list[j].ladderPrice)
                if (ladderPrice < supplyAllianceMinWholesalePrice || ladderPrice > supplyAllianceMaxWholesalePrice) {
                  this.$message({ type: 'error', message: '阶梯价要在限定批发价范围之内' })
                  return
                }
              }
            }
          }
        }
        this.$emit('callback', this.priceList)
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
